import React, { useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile'
import './App.css'
export default function App() {
  const [list,setlist]=useState([
    {id:1,img:'/img/1.jpg',name:'123',price:'123'},
    {id:2,img:'/img/2.jpg',name:'123',price:'123'},
    {id:3,img:'/img/3.jpg',name:'123',price:'123'},
    {id:4,img:'/img/4.jpg',name:'123',price:'123'},
    {id:5,img:'/img/5.jpg',name:'123',price:'123'},
    {id:6,img:'/img/6.jpg',name:'123',price:'123'},
    {id:7,img:'/img/7.jpg',name:'123',price:'123'},
    {id:8,img:'/img/8.jpg',name:'123',price:'123'},

  ])
  const [len, setlen] = useState(4)
  const [hasMore, setHasMore] = useState(true)
  const [qie,setqie]=useState(false)
const loadMoreData=()=>{
  if ( 
    window.innerHeight+window.screenY>=window.screenTop-1){
      setTimeout(() => {
        setlen(len + 2) 
        setHasMore(len < list.length)
      }, 2000);
    }   
}

const InfiniteScrollContent = ({ hasMore }) => {
  return (
    <>
      {hasMore ? (
        <>
          <span>Loading</span>
          
        </>
      ) : (
        <span>--- 我是有底线的 ---</span>
      )}
    </>
  )
}




  return (
    <div className='box'>
      <button onClick={()=>{setqie(!qie)}}>切换</button>
      <List >
      <div className='content'>
            {
              list.slice(0,len).map((item,index)=>{
                return <dl key={index}  className={qie == false ? 'er' : 'yi'}>
                  <dt><img src={item.img} alt="" /></dt>
                  <dd>
                    <span>{item.name}</span> 
                    <p>￥{item.price}</p>
                  </dd>
                </dl>
              })
            }
      </div>
      </List>
    
      <InfiniteScroll loadMore={loadMoreData} hasMore={hasMore} >
      <InfiniteScrollContent hasMore={hasMore} />
      </InfiniteScroll>

    </div>
  )
}
